<template>
	<view class="followplayer">
		<video :show-center-play-btn="false" id="myvideo" class="videoplay" :controls="false" :autoplay="autoplay"
		 :src="ip+'/video/'+videoitem" loop="true" :enable-progress-gesture="false" object-fit="contain">
			<view @click.stop="clicker">
				<icon v-show="play" class="iconpause iconfont icon-zanting"></icon>
				<icon v-show="!play" class="iconplay iconfont icon-bofang"></icon>
			</view>
			</video>
	</view>
</template>

<script>
	import t from '../common/helper.js';
	export default {
		name: "FollowPlayer",
		data() {
			return {
				ip: t.o,
				video: '',
				play: false,
				autoplay: false,
			};
		},
		props: {
			videoitem: {
				type: String,
				default: '',
			},
			index: {},
		},
		methods: {
			clicker() {
						//单击
						if (this.play) {
							this.pause();
						} else {
							this.player();
						}
			},
			player() {
				if (!this.play) {
					this.video.play();
					this.play = true;
					this.$emit('oClick');
				}
			},
			pause() {
				if (this.play) {
					this.video.pause();
					this.play = false;
					this.$emit('oClick');
				}
			},
			seek() {
				this.video.seek(0);
			},
			swiperChange() {
				this.$bus.$on('changepage',() => {
					this.video.pause();
				});
			}
		},
		created() {
			this.video = uni.createVideoContext('myvideo', this);
		},
		mounted() {
			this.swiperChange();
		}
	}
</script>

<style lang="scss">
	.followplayer {
		width: 100%;
		height: 100%;
		.videoplay {
			width: 80%;
			height: 100%;
			border-radius: 5px;
			position: relative;
			.iconplay, .iconpause {
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}
	}
</style>
